<template>
  <div class="goHome">
    <van-nav-bar fixed placeholder>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button 
        round 
        class="search-btn" 
        size="small" 
        icon="search"
        @click="$router.push('/search')"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>

    <!-- tabs栏 -->
    <van-tabs v-model="active" @click="tabClick">
      <!-- tab导航栏 -->
      <van-tab v-for="item in channelList" :key="item.id" :title="item.name">
        <!-- 下拉刷新 -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <!-- 列表 -->
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell 
            v-for="item in articleList" 
            :key="item.art_id" 
            :title="item.title"
            @click="$router.push({path:'/myarticle',query:{id:item.art_id}})"
            >
              <!-- 插槽 -->
              <template #label>
                <van-grid :column-num="item.cover.type">
                  <van-grid-item v-for="(it,index) in item.cover.images" :key="index">
                    <van-image :src="it" lazy-load/>
                  </van-grid-item>
                </van-grid>
                <br />
                <span>{{item.aut_name}}</span>&nbsp;&nbsp; <span>{{item.comm_count}}</span>&nbsp;&nbsp;
                <span>{{item.pubdate | fromNow}}</span>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <!-- 下拉刷新 -->
  </div>
</template>

<script>
import { getChannelList, getArticleList } from "./home.js";
import moment from 'moment'
moment.locale('zh-cn')
export default {
  name: "home",
  data() {
    return {
      active: 0, //tabs栏点击
      loading: false, //上啦加载更多动画
      finished: false, //是否全部加载完毕
      list: [], //频道列表数据
      isLoading: false, //下拉刷新动画
      channelList: [], //频道列表
      timestamp: null,
      articleList: [],
    };
  },
  methods: {
    async onLoad() {
      //判断是不是第一页
      if (!this.timestamp) {
        this.timestamp = Date.now();
      }
      //发送请求
      let res = await getArticleList({
        channel_id: this.channelList[this.active].id,
        timestamp: this.timestamp,
      });
      //存储服务器返回的时间戳，用于请求写一页的数据
      this.timestamp = res.data.data.pre_timestamp;
      //绑定数据
      this.articleList.push(...res.data.data.results);
      //设置loading为false：作用是关闭加载中动画(表示本次数据加载完毕)
      this.loading = false;
      //限制最多数据100条，超过100条。设置finished属性为true：作用是不
      if (this.articleList.length >= 50) {
        this.finished = true;
      }
    },
    onRefresh() {
      //下拉刷新，需要无条件设置list组件的finished为false
      this.finished = false;
      //关闭下拉刷新动画
      this.isLoading = false;
      //清空列表 与时间戳(从第一页开始加载)
      this.articleList = [];
      this.timestamp = null
      //开启加载更多动画
      this.loading = true;
      //主动触发加载更多事件
      this.onLoad();
    },
    //点击tab栏切换
    tabClick() {
     //下拉刷新，需要无条件设置list组件的finished为false
      this.finished = false;
        //清空列表 与时间戳(从第一页开始加载)
      this.articleList = [];
      this.timestamp = null
      //开启加载更多动画
      this.loading = true;
      //主动触发加载更多事件
      this.onLoad();
    },
  },
  async created() {
    let res = await getChannelList();
    this.channelList = res.data.data.channels;
  },
  filters:{
    fromNow(value){
      return moment(value).fromNow()
    }
  }
};
</script>

<style lang='less'>
.goHome {

  .logo {
    width: 100px;
    height: 30px;
    background: url("~@/assets/logo.png");
    background-size: 100%;
  }
  .search-btn {
    background-color: rgba(255, 255, 255, 0.3);
    width: 100px;
    font-size: 14px;
    border: none;
    .van-icon {
      color: #fff;
    }
    .van-button__text {
      color: #fff;
    }
  }
  .van-nav-bar_right {
    .van-button {
      width: 100px;
      height: 35px;
      background-color: #00affd;
      .van-icon {
        color: #fff;
      }
    }
  }
  .van-tabs__wrap {
    position: fixed;
    width: 100%;
    top: 46px;
    z-index: 10;
  }
  .van-tabs__content {
    margin-top: 50px;
  }
}
</style>